<template>
  <div class="wrap">
    <div class="add-button-row">
      <el-button type="primary" @click="addSwitch">增加轴体</el-button>
    </div>
    <div class="search-row">
      <el-input class="keyword" @input="refreshList" v-model="keyword" placeholder="请输入内容"></el-input>
      <el-checkbox v-model="onlyShowNoColor" @change="refreshList" label="只显示无颜色轴体" border></el-checkbox>
      <el-checkbox v-model="onlyShowNoManu" @change="refreshList" label="只显示无工厂轴体" border></el-checkbox>
    </div>
    <el-table :data="list" style="width: 100%">
      <el-table-column label="序号" width="80" prop="index" />
      <el-table-column label="轴体名称" width="180" prop="simpleName" />
      <el-table-column label="代工厂" width="100" prop="manufacturerName" />
      <el-table-column label="作者" width="100" prop="authorName" />
      <el-table-column label="轴体类型" width="100" prop="switchTypeName" />
      <el-table-column label="轴体颜色" width="100">
        <template slot-scope="scope">
          <div class="switch-color" :style="{backgroundColor: '#' + scope.row.backgroundColor }"></div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="editSwitch(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteSwitch(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="changePage"
    ></el-pagination>
  </div>
</template>
<script>
import {
  Input,
  Button,
  Table,
  TableColumn,
  Pagination,
  Checkbox
} from "element-ui";
import { getSwitchList } from "@/api/keyswitch.js";
export default {
  name: "keyswitch",
  components: {
    [Input.name]: Input,
    [Button.name]: Button,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Pagination.name]: Pagination,
    [Checkbox.name]: Checkbox
  },
  data() {
    return {
      list: [],
      pageNum: 1,
      pageSize: 10,
      keyword: null,
      onlyShowNoColor: false,
      onlyShowNoManu: false,
      total: 0
    };
  },
  methods: {
    refreshList() {
      getSwitchList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        keyword: this.keyword,
        onlyShowNoColor: this.onlyShowNoColor,
        onlyShowNoManufacturer: this.onlyShowNoManu
      })
        .then(res => {
          this.list = res.list;
          this.total = res.total;
          this.list.forEach((item, index) => (item.index = index + 1));
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    changePage(page) {
      this.pageNum = page;
      this.refreshList();
    },
    deleteSwitch(index, row) {
      this.$confirm("此操作将永久删除该轴体, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    },
    editSwitch(index, row) {
      this.$router.push(`/backend/edit-switch/${row.id}`);
    },
    addSwitch(){
      this.$router.push(`/backend/add-switch`);
    }
  },
  mounted() {
    this.refreshList();
  }
};
</script>
<style lang="stylus" scoped>
.wrap {
  .search-row {
    margin-top: 5px;

    .keyword {
      width: 500px;
      display: block;
    }
  }

  .switch-color {
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 4px;
    margin-left: 10px;
    border: 1px solid black;
  }
}
</style>